<template>
  <div class="menu-container">
    <div class="selected-container">
      <span class="select-name">{{ selectName }}</span>
      <span class="select-names">{{ selectNameStr }}</span>
      <div v-if="selectId !== '0'">
        <span class="uncollect-button" v-if="isCollect" @click="onCollect(false)">取消关注</span>
        <span class="collect-button" v-else @click="onCollect(true)">关注该类目</span>
      </div>
    </div>
    <div class="menu-list" v-if="listData && listData.length > 0">
      <div class="label">
        选择类目
      </div>
      <template v-for="(item, index) in listData" :key="item.id">
        <!-- level1 -->
        <div :class="selectId === item.id ? 'menu-item act-item' : 'menu-item'"
          :style="selectId === item.id ? 'cursor:auto' : ''" v-if="item.level === 1">
          <span class="flex1" @click="onselect(item)">
            <MenuIcon :id="item.id" :selectId="selectId"></MenuIcon>
            {{ item.lastName }}
          </span>
        </div>
        <!-- level2 -->
        <div :class="selectId === item.id ? 'second-menu-item act-item' : 'second-menu-item'"
          :style="selectId === item.id ? 'cursor:auto' : ''" v-if="item.level === 2">
          <span class="flex1" @click="onselect(item)">
            {{ item.lastName }}
          </span>
        </div>
        <!-- level3 -->
        <div :class="selectId === item.id ? 'third-menu-item act-item' : 'third-menu-item'"
          :style="selectId === item.id ? 'cursor:auto' : ''" v-if="item.level === 3">
          <span class="flex1" @click="onselect(item)">
            {{ item.lastName }}
          </span>
        </div>
      </template>
    </div>
    <div class="empty-container" v-else>
      <img src="@i/icon-warn.png" class="icon-warn">
      <span>暂无关注的品类</span>
    </div>
  </div>
</template>

<script setup lang="ts">
import {
  DownOutlined,
  UpOutlined,
} from '@ant-design/icons-vue';
import { ref, onMounted } from 'vue'
import { getSheinType } from '@r/api/productType'
import { getSubTypes } from '@r/api/userSub'
import { subType, unSubType } from '@r/api/userSub'
import { message } from 'ant-design-vue';
import MenuIcon from '@c/menuIcon/index.vue';

let listData = ref<any[]>([])
let selectId = ref<string>('0')
let selectNameStr = ref<string>('')
let selectName = ref<string>('')
let isCollect = ref<boolean>(false)
const emits = defineEmits<{
  (emitstr: 'onSelectMenu', emitData: {
    id?: string
    level?: number
    firstName: string
    secondName?: string
    thirdName?: string
  }): void
}>()
onMounted(() => {
  getList()
})
function onselect(item: { id: string, level: number | undefined, firstName: string, secondName?: string, thirdName?: string }) {
  let { id, level, firstName, secondName, thirdName } = item
  if (selectId.value === id) {
    return
  }
  selectId.value = id
  selectName.value = thirdName ? thirdName : (secondName ? secondName : firstName)
  selectNameStr.value = `${firstName}${secondName ? '>' + secondName : ''}${thirdName ? '>' + thirdName : ''}`
  emits('onSelectMenu', { id: id === '0' ? undefined : id, level, firstName, secondName, thirdName })
  getSheinTypefunc()
}
function getSheinTypefunc() {
  getSheinType({ typeId: selectId.value }).then((res: any) => {
    isCollect.value = res.sub
  })
}
function onCollect(hadCollect: boolean) {
  if (hadCollect) {
    subType({ typeId: selectId.value }).then(res => {
      isCollect.value = !isCollect.value
      message.success('关注成功')
    })
  } else {
    unSubType({ typeId: selectId.value }).then(res => {
      isCollect.value = !isCollect.value
      message.success('取消成功')
    })
  }
}
function getList() {
  getSubTypes({}).then((res: any) => {
    console.log(res);
    res = res.map((item: any) => {
      let newItem: { level?: number; firstName?: string; secondName?: string; thirdName?: string, id?: string, lastName?: string } = {}
      item.types.map((listItem: any, index: number) => {
        newItem.level = index + 1
        switch (index) {
          case 0:
            newItem.firstName = listItem.name
            break;
          case 1:
            newItem.secondName = listItem.name
            break;
          case 2:
            newItem.thirdName = listItem.name
            break;
        }
        newItem.id = listItem.id
        newItem.lastName = listItem.name
        // return newItem
      })
      return newItem
    })
    listData.value = res
    onselect(res[0])
  })
}
</script>
<style scoped lang="less">
.flex1 {
  flex: 1;
}

.empty-container {
  // width: 250px;
  // border-radius: 10px;
  background: #FFFFFF;
  margin-top: 10px;
  display: flex;
  flex-direction: row;
  color: #999999;
  font-size: 14px;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  flex: 1;

  .icon-warn {
    height: 16px;
    width: 16px;
    margin-right: 10px;
  }
}

.menu-container {
  display: flex;
  flex-direction: column;
  width: 250px;
  border-radius: 10px;
  background: #FFFFFF;
  margin-top: 10px;

  .selected-container {
    height: 150px;
    width: 250px;
    background-image: url('@i/menu-bg.png');
    background-size: 250px 150px;
    border-bottom: 1px solid #EFEFEF;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    padding: 20px 30px;

    .select-name {
      font-size: 20px;
      font-weight: 600;
      line-height: 20px;
      display: flex;
      align-items: center;
    }

    .select-names {
      font-size: 14px;
      font-weight: normal;
      line-height: 16px;
      text-align: center;
      display: flex;
      align-items: center;
      color: #999999;
    }

    .collect-button {
      width: 110px;
      height: 32px;
      border-radius: 20px;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      background: linear-gradient(90deg, #FA7D54 0%, #FF3F3F 99%);
      box-shadow: 0px 4px 10px 0px rgba(254, 68, 65, 0.3);
      font-size: 14px;
      font-weight: 500;
      line-height: 14px;
      color: #FFFFFF;
      cursor: pointer;
    }

    .uncollect-button {
      width: 96px;
      height: 32px;
      border-radius: 20px;
      background: #FFFFFF;
      border: 1px solid #FF6923;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 14px;
      font-weight: 500;
      line-height: 14px;
      text-align: center;
      letter-spacing: 0em;
      color: #FF6923;
      cursor: pointer;
    }
  }

  .menu-list {
    display: flex;
    flex-direction: column;
    margin: 10px 12px;
    background: #fff;
    overflow-y: auto;

    .label {
      font-size: 16px;
      font-weight: normal;
      line-height: 16px;
      display: flex;
      align-items: center;
      letter-spacing: 0em;
      color: #999999;
      margin-bottom: 15px;
      cursor: pointer;
    }

    .arrow-icon {
      height: 100%;
      padding: 0 12px;
    }

    .act-item {
      background: #FEF8F4;
      color: #FF6923;
      cursor: none;
    }

    .menu-item {
      line-height: 46px;
      width: 100%;
      font-size: 16px;
      font-weight: 600;
      padding: 0 8px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      cursor: pointer;
    }

    .second-menu-item {
      line-height: 46px;
      width: 100%;
      font-size: 16px;
      padding: 0 8px 0 8px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      cursor: pointer;
    }

    .third-menu-item {
      line-height: 46px;
      width: 100%;
      font-size: 14px;
      padding: 0 8px 0 8px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      cursor: pointer;
    }
  }
}
</style>